<%--
  Created by IntelliJ IDEA.
  User: 于永祥
  Date: 2022/9/20
  Time: 16:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<!doctype html>
<html lang="en" class="pxp-root">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--滑块验证-->
    <link rel="stylesheet" type="text/css" href="/static/web/css/verify.css">
    <script src="/static/web/demos/googlegg.js"></script>
    <script type="text/javascript" src="/static/web/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/web/js/verify.js"></script>
    <script type="text/javascript" src="/static/web/js/jquery-3.3.1.min.js"></script>

    <!--短信验证码-->
    <link rel="stylesheet" href="/static/web/js/layui/css/layui.css" rel="external nofollow" >
    <script type="text/javascript" src="/static/web/js/layui/layui.js"></script>
    <script type="text/javascript" src="/static/web/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/static/web/js/jquery-3.3.1.min.js"></script>

    <link rel="shortcut icon" href="/static/web/images/favicon.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap" rel="stylesheet">
    <link href="/static/web/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/web/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/web/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/static/web/css/animate.css">
    <link rel="stylesheet" href="/static/web/css/style.css">
    <script type="text/javascript" src="/static/web/js/jquery-3.3.1.min.js"></script>

    <title>万码招聘 - 登录</title>
</head>
<body>
<div class="pxp-preloader"><span>Loading...</span></div>

<!--Head-->
<jsp:include page="/web/personal/inc/personalSignUpHead"/>

<script type="text/javascript">
    /*
* 滑块验证 js代码
* */
    (function($, window, document,undefined) {
        //定义Slide的构造函数
        var Slide = function(ele, opt) {
            this.$element = ele,
                this.defaults = {
                    type : 1,
                    vOffset: 5,
                    vSpace : 5,
                    // imgName : ['nn.jpg', 'xx.jpg'],
                    imgSize : {
                        width: '400px',
                        height: '200px',
                    },
                    blockSize : {
                        width: '50px',
                        height: '50px',
                    },
                    barSize : {
                        width : '400px',
                        height : '40px',
                    },
                    ready : function(){},
                    success : function(){},
                    error : function(){}
                },
                this.options = $.extend({}, this.defaults, opt)
        };
        //定义Slide的方法
        Slide.prototype = {
            init: function() {
                var _this = this;
                //加载页面
                this.loadDom();
                //截取滑块图片某部分
                this.$element.find('.verify-sub-block').css({'background-image': 'url(/static/web/images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
                this.options.ready();
                this.$element[0].onselectstart = document.body.ondrag = function(){
                    return false;
                };
                //按下
                this.htmlDoms.move_block.on('touchstart', function(e) {
                    _this.start(e);
                });
                this.htmlDoms.move_block.on('mousedown', function(e) {
                    _this.start(e);
                });
                //拖动
                window.addEventListener("touchmove", function(e) {
                    _this.move(e);
                });
                window.addEventListener("mousemove", function(e) {
                    _this.move(e);
                });
                //鼠标松开
                window.addEventListener("touchend", function() {
                    _this.end();
                });
                window.addEventListener("mouseup", function() {
                    _this.end();
                });
                //刷新
                _this.$element.find('.verify-refresh').on('click', function() {
                    _this.refresh();
                });
            },
            //初始化加载
            loadDom : function() {
                //随机的背景图片
                this.img_rand = Math.floor(Math.random() * this.options.imgName.length);
                var panelHtml = '';
                var tmpHtml = '';
                if(this.options.type != 1) {     //图片滑动
                    panelHtml += '<div class="verify-img-panel"><div  class="verify-refresh"><i class="iconfont icon-refresh"></i></div><div class="verify-gap"></div></div>';
                    tmpHtml = '<div  class="verify-sub-block"></div>';
                }
                panelHtml += '<div class="verify-bar-area"><span  class="verify-msg">向右滑动完成验证</span><div class="verify-left-bar"><span  class="verify-msg"></span><div  class="verify-move-block"><i  class="verify-icon iconfont icon-right"></i>'+tmpHtml+'</div></div></div>';
                this.$element.append(panelHtml);
                this.htmlDoms = {
                    gap : this.$element.find('.verify-gap'),
                    sub_block : this.$element.find('.verify-sub-block'),
                    img_panel : this.$element.find('.verify-img-panel'),
                    bar_area : this.$element.find('.verify-bar-area'),
                    move_block : this.$element.find('.verify-move-block'),
                    left_bar : this.$element.find('.verify-left-bar'),
                    msg : this.$element.find('.verify-msg'),
                    icon : this.$element.find('.verify-icon'),
                    refresh :this.$element.find('.verify-refresh')
                };
                this.status = false;  //鼠标状态
                this.setSize = this.resetSize(this);  //重新设置宽度高度
                this.htmlDoms.gap.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height});
                this.htmlDoms.sub_block.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height});
                this.htmlDoms.img_panel.css({'width': this.setSize.img_width, 'height': this.setSize.img_height, 'background': 'url(/static/web/images/'+this.options.imgName[this.img_rand]+')', 'background-size' : this.setSize.img_width + ' '+ this.setSize.img_height});
                this.htmlDoms.bar_area.css({'width': this.setSize.bar_width, 'height': this.options.barSize.height, 'line-height':this.options.barSize.height});
                this.htmlDoms.move_block.css({'width': this.options.barSize.height, 'height': this.options.barSize.height});
                this.htmlDoms.left_bar.css({'width': this.options.barSize.height, 'height': this.options.barSize.height});
                this.randSet();
            },
            //鼠标按下
            start: function(e) {
                this.htmlDoms.msg.text('');
                this.htmlDoms.move_block.css('background-color', '#337ab7');
                this.htmlDoms.left_bar.css('border-color', '#337AB7');
                this.htmlDoms.icon.css('color', '#fff');
                e.stopPropagation();
                this.status = true;

            },
            //鼠标移动
            move: function(e) {
                if(this.status) {
                    if(!e.touches) {    //兼容移动端
                        var x = e.clientX;
                    }else {     //兼容PC端
                        var x = e.touches[0].pageX;
                    }
                    var bar_area_left = Slide.prototype.getLeft(this.htmlDoms.bar_area[0]);
                    var move_block_left = x - bar_area_left; //小方块相对于父元素的left值
                    if(this.options.type != 1) {     //图片滑动
                        if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2) {
                            move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2;
                        }
                    }else {        //普通滑动
                        if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3) {
                            this.$element.find('.verify-msg:eq(1)').text('松开验证');
                            move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3;
                        }else {
                            this.$element.find('.verify-msg:eq(1)').text('');
                        }
                    }
                    if(move_block_left <= 0) {
                        move_block_left = parseInt(parseInt(this.options.blockSize.width)/2);
                    }
                    //拖动后小方块的left值
                    this.htmlDoms.move_block.css('left', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
                    this.htmlDoms.left_bar.css('width', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
                }
            },
            //鼠标松开
            end: function() {
                var _this = this;
                //判断是否重合
                if(this.status) {
                    if(this.options.type != 1) {     //图片滑动
                        var vOffset = parseInt(this.options.vOffset);
                        if(parseInt(this.htmlDoms.gap.css('left')) >= (parseInt(this.htmlDoms.move_block.css('left')) - vOffset) && parseInt(this.htmlDoms.gap.css('left')) <= (parseInt(this.htmlDoms.move_block.css('left')) + vOffset)) {
                            this.htmlDoms.move_block.css('background-color', '#5cb85c');
                            this.htmlDoms.left_bar.css({'border-color': '#5cb85c', 'background-color': '#fff'});
                            this.htmlDoms.icon.css('color', '#fff');
                            this.htmlDoms.icon.removeClass('icon-right');
                            this.htmlDoms.icon.addClass('icon-check');
                            this.htmlDoms.refresh.hide();
                            this.htmlDoms.move_block.unbind('mousedown touchstart');
                            this.options.success();
                        }else{
                            this.htmlDoms.move_block.css('background-color', '#d9534f');
                            this.htmlDoms.left_bar.css('border-color', '#d9534f');
                            this.htmlDoms.icon.css('color', '#fff');
                            this.htmlDoms.icon.removeClass('icon-right');
                            this.htmlDoms.icon.addClass('icon-close');
                            setTimeout(function () {
                                _this.htmlDoms.move_block.animate({'left':'0px'}, 'fast');
                                _this.htmlDoms.left_bar.animate({'width': '40px'}, 'fast');
                                _this.htmlDoms.left_bar.css({'border-color': '#ddd'});
                                _this.htmlDoms.move_block.css('background-color', '#fff');
                                _this.htmlDoms.icon.css('color', '#000');
                                _this.htmlDoms.icon.removeClass('icon-close');
                                _this.htmlDoms.icon.addClass('icon-right');
                                _this.$element.find('.verify-msg:eq(0)').text('向右滑动完成验证');
                            }, 400);
                            this.options.error();
                        }
                    }else {
                        //普通滑动
                        if(parseInt(this.htmlDoms.move_block.css('left')) >= (parseInt(this.setSize.bar_width) - parseInt(this.options.barSize.height) - parseInt(this.options.vOffset))) {
                            this.htmlDoms.move_block.css('background-color', '#5cb85c');
                            this.htmlDoms.left_bar.css({'color': '#4cae4c', 'border-color': '#5cb85c', 'background-color': '#fff' });
                            this.htmlDoms.icon.css('color', '#fff');
                            this.htmlDoms.icon.removeClass('icon-right');
                            this.htmlDoms.icon.addClass('icon-check');
                            this.htmlDoms.refresh.hide();
                            this.htmlDoms.move_block.unbind('mousedown');
                            this.htmlDoms.move_block.unbind('touchstart');
                            this.$element.find('.verify-msg:eq(1)').text('验证成功');
                            this.options.success();
                        }else {
                            this.htmlDoms.move_block.css('background-color', '#d9534f');
                            this.htmlDoms.left_bar.css('border-color', '#d9534f');
                            this.htmlDoms.icon.css('color', '#fff');
                            this.htmlDoms.icon.removeClass('icon-right');
                            this.htmlDoms.icon.addClass('icon-close');
                            setTimeout(function () {
                                _this.htmlDoms.move_block.animate({'left':'0px'}, 'fast');
                                _this.htmlDoms.left_bar.animate({'width': '40px'}, 'fast');
                                _this.htmlDoms.left_bar.css({'border-color': '#ddd'});
                                _this.htmlDoms.move_block.css('background-color', '#fff');
                                _this.htmlDoms.icon.css('color', '#000');
                                _this.htmlDoms.icon.removeClass('icon-close');
                                _this.htmlDoms.icon.addClass('icon-right');
                                _this.$element.find('.verify-msg:eq(0)').text('向右滑动解锁');
                            }, 400);
                            this.options.error();
                        }
                    }
                    this.status = false;
                }
            },
            resetSize : function(obj) {
                var img_width,img_height,bar_width,bar_height; //图片的宽度、高度，移动条的宽度、高度
                var parentWidth = obj.$element.parent().width() || $(window).width();
                var parentHeight = obj.$element.parent().height() || $(window).height();
                if(obj.options.imgSize.width.indexOf('%')!= -1){
                    img_width = parseInt(obj.options.imgSize.width)/100 * parentWidth + 'px';
                }else {
                    img_width = obj.options.imgSize.width;
                }
                if(obj.options.imgSize.height.indexOf('%')!= -1){
                    img_height = parseInt(obj.options.imgSize.height)/100 * parentHeight + 'px';
                }else {
                    img_height = obj.options.imgSize.height;
                }
                if(obj.options.barSize.width.indexOf('%')!= -1){
                    bar_width = parseInt(obj.options.barSize.width)/100 * parentWidth + 'px';
                }else {
                    bar_width = obj.options.barSize.width;
                }
                if(obj.options.barSize.height.indexOf('%')!= -1){
                    bar_height = parseInt(obj.options.barSize.height)/100 * parentHeight + 'px';
                }else {
                    bar_height = obj.options.barSize.height;
                }
                return {img_width : img_width, img_height : img_height, bar_width : bar_width, bar_height : bar_height};
            },
            //随机出生点位
            randSet: function() {
                var rand1 = Math.floor(Math.random()*9+1);
                var rand2 = Math.floor(Math.random()*9+1);
                var top = rand1 * parseInt(this.setSize.img_height)/15 + parseInt(this.setSize.img_height) * 0.1;
                var left = rand2 * parseInt(this.setSize.img_width)/15 + parseInt(this.setSize.img_width) * 0.1;
                this.$element.find('.verify-img-panel').css('margin-bottom', this.options.vSpace + 'px');
                this.$element.find('.verify-gap').css({'top': top, 'left': left});
                this.$element.find('.verify-sub-block').css({'top':'-'+(parseInt(this.setSize.img_height)- top + this.options.vSpace + 2)+'px', 'background-image': 'url(images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height,'background-position-y': '-'+top+ 'px', 'background-position-x': '-'+left+'px'});
            },
            //刷新
            refresh: function() {
                this.randSet();
                //随机的背景图片
                this.img_rand = Math.floor(Math.random() * this.options.imgName.length);
                //点击刷新，截取对应滑块图片
                this.$element.find('.verify-img-panel').css({'background': 'url(/static/web/images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
                //截取滑块图片某部分
                this.$element.find('.verify-sub-block').css({'background-image': 'url(/static/web/images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
            },
            //获取left值
            getLeft: function(node) {
                var left = $(node).offset().left;
                return left;
            }
        };
        //在插件中使用slideVerify对象
        $.fn.slideVerify = function(options, callbacks) {
            var slide = new Slide(this, options);
            slide.init();
        };
    })(jQuery, window, document);
</script>

<script type="text/javascript">
    $(function (){
        init();
        //登录
        $("#myform").submit(signIn);

        //验证手机号是否符合规范
        $("#memPhone").blur(verifyPhone);
        //验证短信验证码
        $("#SMS-verifyCode").blur(verifySMS);
        //发送验证码之前，验证账号是否以注册
        $("#sendBtn").click(verifySignUp);
        //获取短信验证码
        $("#sendBtn").click(sendCode);
    });

    function init()
    {
        let userId = "${param.userId}";
        if (userId!="")
        {
            $.get("/web/personal/getPhoneNum",{userId:userId},function (mes){
                $("#memPhone").val(mes);
            });
        }
    }

    //滑块验证全局变量
    var Num = 0;

    //登录
    function signIn(){
        return verifyPhone()&&verifySMS()&&verifySignUp();
    }

    //验证手机号是否符合规范
    function verifyPhone(){
        if($("#memPhone").val()==""){
            $(".phoneTips").html("请输入手机号!");
            $(".phoneTips").css("color","red");
            return false;
        }
        else {
            $(".phoneTips").html("√");
            $(".phoneTips").css("color","blue");
            return true;
        }
    }

    //验证短信验证码
    function verifySMS(){
        var code;
        var sms = $("#SMS-verifyCode").val();
        $.ajax({
            url:"/getCode",
            type:"post",
            async:false,
            success:function (mes){
                code = mes;
            }
        });
        if(sms==""){
            $(".SMS-verifyCodeTips").html("请输入短信验证码!");
            $(".SMS-verifyCodeTips").css("color","red");
            return false;
        }
        if(code==sms){
            $(".SMS-verifyCodeTips").html("√");
            $(".SMS-verifyCodeTips").css("color","blue");
            return true;
        }
        else {
            $(".SMS-verifyCodeTips").html("验证码有误!");
            $(".SMS-verifyCodeTips").css("color","red");
            return true;
        }
    }

    //发送短信验证码之前，验证账号是否注册
    function verifySignUp(){
        var Mes;
        var memPhone = $("#memPhone").val();
        $.ajax({
            url:"/web/verifySignUp",
            data:{
                memPhone:memPhone
            },
            async: false,
            success:function (mes){
                Mes = mes;
            }
        });
        if(Mes=="true"){
            $(".phoneTips").html("√");
            $(".phoneTips").css("color","blue");
            return true;
        }
        else {
            $(".phoneTips").html("该手机号未注册!");
            $(".phoneTips").css("color","red");
            return false;
        }
    }

    //发送短信验证码
    function sendCode(){
        $("#sendBtn").removeAttr("disabled");
        var memPhone = $("#memPhone").val();
        if(memPhone == "" || memPhone.length != 11){
            $(".phoneTips").html("请确认手机号是否有误!");
            $(".phoneTips").css("color","red");
            return false;
        }
        else{
            if(verifySignUp()&&Num==1){
                $.ajax({
                    type: 'get',
                    url: '/sendCode',
                    data: {
                        memPhone : memPhone,
                    },
                    dataType: 'json',
                    success: function(data) {
                        if(data){
                            timer();
                        }else{
                            $(".SMS-verifyCodeTips").html("获取验证码失败!");
                            $(".SMS-verifyCodeTips").css("color","red");
                            return false;
                        }
                    },
                    error: function() {
                        $(".SMS-verifyCodeTips").html("连接超时!");
                        $(".SMS-verifyCodeTips").css("color","red");
                        return false;
                    },
                });
            }
        }
    }
    var wait = 60;
    //倒计时
    function timer() {
        if(wait == 0){
            $("#sendBtn").val("获取验证码");
            $("#sendBtn").removeAttr("disabled");
            $("#sendBtn").css("border-color","1e9fff").css("background", "#ffffff").css("cursor", "pointer");
            wait = 60;
        }else{
            $("#sendBtn").attr("disabled","true");
            $("#sendBtn").css("border-color","fbfbfb").css("background", "#ccc").css("cursor", "not-allowed");
            $("#sendBtn").val(wait + "秒后重发");
            wait--;
            setTimeout(function() {timer()}, 1000);
        }
    }
</script>

<section class="pxp-hero vh-100" style="background-color: var(--pxpMainColorLight);">
    <div class="row align-items-center pxp-sign-hero-container">
        <div class="col-xl-6 pxp-column">
            <div class="pxp-sign-hero-fig text-center pb-100 pt-100">
                <img src="/static/web/images/signin-big-fig.png" alt="Sign In">
                <h1 class="mt-4 mt-lg-5">欢迎回来!</h1>
            </div>
        </div>
        <div class="col-xl-6 pxp-column pxp-is-light">
            <div class="pxp-sign-hero-form pb-100 pt-100">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-xl-7 col-xxl-5">
                        <div class="pxp-sign-hero-form-content">
                            <h5 class="text-center">登录</h5>
                            <form id="myform" method="post" action="/web/signIn" class="mt-4">

                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <c:if test="${param.err==1}"><span class="errtishi" style="margin-left: 20px;color: #0a53be;font-size: 10px;font-weight:bold;">账号或密码输入有误!</span></c:if>
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;" class="phoneTips"></span>
                                    <div class="form-floating mb-3">
                                        <input name="phone" type="text" class="form-control" id="memPhone"  placeholder="phone">
                                        <label for="memPhone" style="font-weight: bold;">手机号</label>
                                        <span class="fa fa-envelope-o"></span>
                                    </div>
                                </div>

                                <!--滑块验证-->
                                <div id="check" style="margin-left:18px;margin-top:15px;margin-bottom: 15px;"></div>
                                <script type="text/javascript">
                                    $('#check').slideVerify({
                                        type : 2,//类型
                                        vOffset : 5,//误差量，根据需求自行调整
                                        vSpace : 2,//间隔
                                        imgName : ['nn.jpg', 'tt.webp','xx.jpg'],//随机可选图片
                                        imgSize : {
                                            //图片尺寸
                                            width: '241px',
                                            height: '200px',
                                        },
                                        blockSize : {
                                            //抠图尺寸
                                            width: '35px',
                                            height: '35px',
                                        },
                                        barSize : {
                                            //滑动条尺寸
                                            width : '241px',
                                            height : '40px',
                                        },
                                        ready : function() {

                                        },
                                        success : function() {
                                            Num = 1;
                                            $("#sendBtn").css("pointer-events","auto");
                                            //alert('验证成功');
                                        },
                                        error : function() {
                                            $("#sendBtn").css("pointer-events","none");
                                            //alert('验证失败！');
                                        }
                                    });
                                </script>

                                <div style="margin-top: -20px;">
                                    <!--错误提示-->
                                    <span style="margin-left: 20px;font-size: 10px;font-weight:bold;" class="SMS-verifyCodeTips"></span>
                                    <div class="form-floating mb-3">
                                        <input name="SMS-verifyCode" type="text" class="form-control" id="SMS-verifyCode" placeholder="SMS-verifyCode">
                                        <label for="SMS-verifyCode" style="font-weight: bold;">短信验证码</label>
                                        <span class="fa fa-envelope-o"></span>
                                    </div>
                                    <input id="sendBtn" class="btn" type="button" value="获取验证码" style="pointer-events:auto;margin-left: 185px;color: black;font-size: 10px;font-weight: bold;"/>
                                    <div style="margin-left:22px;font-weight: bold;font-size: 13px;"><input type="checkbox" name="onCook" class="form-check-input"/>7天免登录</div>
                                </div>

                                <input style="margin-top: 10px;width: 285px;" type="submit" value="登录" class="btn rounded-pill pxp-sign-hero-form-cta">
<%--                                <a href="javascript:void(0)" style="margin-top: 12px;" class="btn rounded-pill pxp-sign-hero-form-cta">登录</a>--%>
                                <div class="mt-4 text-center pxp-sign-hero-form-small">
                                    <a href="/web/personal/login" class="pxp-modal-link" style="font-weight: bold;">密码登录</a>
                                </div>
                                <div class="mt-4 text-center pxp-sign-hero-form-small" style="font-weight: bold;">
                                    新手？<a href="/web/personal/signUp">创建账号</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<%--<!--foot-->--%>
<%--<jsp:include page="/web/personal/inc/personalSignUpFoot"/>--%>

<script src="/static/web/js/jquery-3.4.1.min.js"></script>
<script src="/static/web/js/bootstrap.bundle.min.js"></script>
<script src="/static/web/js/owl.carousel.min.js"></script>
<script src="/static/web/js/nav.js"></script>
<script src="/static/web/js/main.js"></script>
</body>
</html>

